<template>
    <div class="post-comment">
        <div style="font-size: 15px">评论区</div>
        <div class="pubilsh-comment">
            <el-avatar :size="60" :src="userinfo.pic" />
            <div class="pubilsh-content">
                <textarea type="textarea" cols="105" rows="3" placeholder="快来评论吧！" v-model="comcon"></textarea>
            </div>
            <div class="pubilsh-btn">
                <span><el-icon :size="60">
                        <IconPark :icon="ArrowCircleRight" @click="pubilshcom" />
                    </el-icon></span>
            </div>
        </div>
        <div class="comment-content">
            <el-table :data="commentData" :show-header="false" :height="300" stripe empty-text="暂无消息">
                <el-table-column width="75">
                    <template #default="scope">
                        <el-avatar :size="50" :src="scope.row.pic" />
                    </template>
                </el-table-column>
                <el-table-column width="600">
                    <template #default="scope">
                        <div>
                            <span style="color: #2a97d1">{{ scope.row.username }}</span>
                        </div>
                        <div>
                            <span style="font-size: 13px">{{ scope.row.content }}</span>
                        </div>
                        <div>
                            <span style="font-size: 12px">{{ scope.row.createTime }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column>
                    <template #default="scope">
                        <span style="margin-left: 20px; cursor: pointer" @click="openCom(scope.row)"><el-icon :size="18">
                                <IconPark :icon="MessageUnread" />
                            </el-icon></span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-drawer v-model="isshowCom" :with-header="false">
            <div class="TwoCom-style">
                <el-avatar :size="80" :src="TwoCom.pic" />
                <div style="margin-left: 20px; display: flex; flex-direction: column">
                    <span>{{ TwoCom.username }}</span>
                    <span>{{ TwoCom.content }}</span>
                    <span>{{ TwoCom.createTime }}</span>
                </div>
            </div>
            <el-divider />
            <el-table :data="TwoCom.children" :show-header="false" :height="GetViewHeight(215)" stripe empty-text="暂无消息">
                <el-table-column width="75">
                    <template #default="scope">
                        <el-avatar :size="50" :src="scope.row.pic" />
                    </template>
                </el-table-column>
                <el-table-column width="265">
                    <template #default="scope">
                        <div>
                            <span style="color: #2a97d1">{{ scope.row.username }}</span>
                        </div>
                        <div>
                            <span style="font-size: 13px">{{ scope.row.content }}</span>
                        </div>
                        <div>
                            <span style="font-size: 12px">{{ scope.row.createTime }}</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="TwoCom-bottom">
                <el-input v-model="TwoComCon" />
                <el-button type="primary" @click="publishTwoCon">发布</el-button>
            </div>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
import { ArrowCircleRight, MessageUnread } from "@icon-park/vue-next";
import IconPark from "@components/IconPark.vue";
import { useUserInfo } from "@store/userinfo";
import { usePostInfo } from "@store/postinfo";
import { onMounted, ref } from "vue";
import { storeToRefs } from "pinia";
import { get_comment, add_comment } from "@api/postapi";
import type { Tcomment } from "@models/comment";
import { findIndex } from "lodash";
import { useViewHeightStore } from "@store/viewheight";
import { ElMessage } from "element-plus";

const { userinfo } = storeToRefs(useUserInfo());
const { postinfo } = storeToRefs(usePostInfo());
const { GetViewHeight } = useViewHeightStore();

const comcon = ref<string>();

const commentData = ref<Array<Tcomment>>([]);

const isshowCom = ref<boolean>(false);

const TwoCom = ref<Tcomment>();
const TwoComCon = ref<string>("");

const openCom = (item: Tcomment) => {
    isshowCom.value = true;
    TwoCom.value = item;
};

const pubilshcom = async () => {
    const res = await add_comment({
        postId: postinfo.value.id,
        content: comcon.value,
    });
    if (res.code === 200) {
        ElMessage.success(res.msg);
        commentData.value.unshift({
            ...res.data,
            username: userinfo.value.username,
            pic: userinfo.value.pic,
        });
        comcon.value = "";
    }
};

const publishTwoCon = async () => {
    const res = await add_comment(
        {
            postId: postinfo.value.id,
            content: TwoComCon.value,
        },
        { firstId: TwoCom.value.id }
    );
    if (res.code === 200) {
        ElMessage.success(res.msg);
        const index = findIndex(commentData.value, item => item.id === TwoCom.value.id);
        if (!commentData.value[index].children) {
            commentData.value[index].children = [];
        }
        commentData.value[index].children.unshift({
            ...res.data,
            username: userinfo.value.username,
            pic: userinfo.value.pic,
        })
        TwoComCon.value = "";
    }
};

onMounted(async () => {
    const res = await get_comment({ postId: postinfo.value.id });
    if (res.code === 200) {
        commentData.value = res.data;
    }
});
</script>

<style scoped lang="less">
.post-comment {
    width: 100%;
    display: flex;
    flex-direction: column;

    .TwoCom-style {
        display: flex;
        align-items: center;

        span {
            font-size: 16px;
            font-weight: 300;
            margin: 2px 0;
        }

        span:first-child {
            color: #2a97d1;
            font-size: large;
        }
    }

    .TwoCom-bottom {
        margin-top: 10px;
        display: flex;

        .el-input {
            margin-right: 10px;
        }
    }

    .pubilsh-comment {
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;
        margin-top: 10px;
        border-radius: 5px;
        border: 1px solid #d8dce5;

        .el-avatar {
            margin-left: 20px;
        }

        .pubilsh-content {
            margin-left: 15px;
            padding: 10px;
            width: 580px;
            height: 60px;
            position: relative;
            border: 1px solid #d8dce5;
            border-radius: 10px;

            textarea {
                width: 580px;
                margin-top: 5px;
                outline: none;
                border: 0;
            }

            &::before {
                content: "";
                position: absolute;
                left: -10px;
                top: 30px;
                width: 0;
                height: 0;
                border: 5px solid transparent;
                border-right-color: #f5f5f5;
                font-size: 0;
                padding: 0;
                line-height: 0;
                z-index: 12;
            }

            &::after {
                content: "";
                position: absolute;
                left: -12px;
                top: 29.5px;
                width: 0;
                height: 0;
                border: 6px solid transparent;
                border-right-color: #c5c5c5;
                font-size: 0;
                padding: 0;
                line-height: 0;
                z-index: 10;
            }
        }

        .pubilsh-btn {
            display: flex;
            width: 54px;
            height: 53px;
            margin: 0 20px;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            background-color: #2a97d1;
            cursor: pointer;
            color: white;

            span {
                margin-top: 4px;
            }
        }
    }

    .comment-conten {
        width: 100%;
    }
}
</style>
